import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[myHighlight]'
})
export class ShowHead {
  private _defaultColor = 'red';
  private el: HTMLElement;

  constructor(el: ElementRef) { this.el = el.nativeElement; }

  // @Input() set defaultColor(colorName: string){
  //   this._defaultColor = colorName || this._defaultColor;
  // }

  // @Input('myHighlight') highlightColor: string;

  @HostBinding('class.headerAnimationTop') hovering = false;
  @HostBinding('class.headerAnimationDown') hoveringd = false;


  @HostListener('mouseenter') onMouseEnter() {
    // this.highlight(this.highlightColor || this._defaultColor);
    this.hovering = true;
  }
  @HostListener('mouseleave') onMouseLeave() {
    //  this.highlight(null);
    this.hovering = false;
  }

  @HostListener('window:scroll', ['$event'])
  doSomething(event) {
  //  console.debug("Scroll Event", document.body.scrollTop);
    if(document.body.scrollTop > 300){
        this.hovering = true;
        this.hoveringd = false;
    }
    if(document.body.scrollTop < 50){     
        this.hovering = false;
        this.hoveringd = true;
    }
    //console.info("yeah",event);
  
  }

  // private highlight(color: string) {
  //   this.el.style.backgroundColor = color;
  // }

}
